<template>
  <div id="app">
    <div class="app-container">
      <router-view />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

// 全局数据状态
const userInfo = ref(null)
const token = ref('')

// 生命周期钩子
onMounted(() => {
  console.log('App Mounted')
  // 可以在这里进行初始化操作，如获取用户信息、检查登录状态等
})

onUnmounted(() => {
  console.log('App Unmounted')
})

// 全局方法
defineExpose({
  setUserInfo(newUserInfo) {
    userInfo.value = newUserInfo
  },
  getUserInfo() {
    return userInfo.value
  },
  setToken(newToken) {
    token.value = newToken
  },
  getToken() {
    return token.value
  }
})
</script>

<style>
/* 全局样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 覆盖uni-app的一些默认样式 */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  font-size: 14px;
  color: #333333;
  background-color: #F8F8F8;
  line-height: 1.5;
}
/* H5应用容器样式 */
.app-container {
  max-width: 480px;
  margin: 0 auto;
  background-color: var(--bg-color);
  min-height: 100vh;
  position: relative;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

/* 移动端适配 */
@media screen and (max-width: 480px) {
  .app-container {
    max-width: 100%;
    margin: 0;
    box-shadow: none;
  }
}
</style>
